import React, {PropTypes, Component} from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import {observer} from 'mobx-react';

import lyby from '../util';

import UserAvatar from '../userAvatar/index';

class Neirong extends Component {
    constructor(props){
        super(props);
        let item = this.props.data;
        this.state = {
            screenWidth: false,
            pictureLikeedCount: item.pictureLikeedCount,
            userLikerState: item.userLikerState
        };
    }
    _addCount(){
        if (!lyby.validateUser()){
            return ;
        }
        let loginUser = lyby.loginUser.getData();
        let item = this.props.data;
        if(item.uploaderInfo.id == loginUser.userId){
            return ;
        }
        if(this.state.userLikerState){
            let aa = confirm("是否确认取消点赞？");
            if(!aa){
                return;
            }
        }
        $.ajax({
            url: '/community/doLike.do?likedId='+item.id
        }).done(function(){
            let deta = this.state.userLikerState? -1 : 1;

            this.setState({
                userLikerState: !this.state.userLikerState,
                pictureLikeedCount: this.state.pictureLikeedCount + deta
            });
        }.bind(this));
    }
    render (){
        let item = this.props.data;
        let countImg = this.state.userLikerState ? "//cdn.shijue.me/images/comment/liked.svg":"//cdn.shijue.me/images/comment/like.svg";
        let name = item.uploaderInfo.nickName ? item.uploaderInfo.nickName : item.uploaderInfo.userName;

        let detailUrl = '/community/photo-details/' + item.id;
        let userUrl = '/community/user-details/' + item.uploaderId;

        return (
            <div className={classNames({
                "title with-img p-sm": true
            })}>
                <UserAvatar {...{
                    data : item.uploaderInfo
                }}/>
                <a href={detailUrl} target="_blank" className="fontW70-13">
                    <span className="item-sucai-title widthTooo">{lyby.htmldecode(item.title)}</span>
                </a>
                <a href={userUrl} target="_blank" className="fontW50-13 widthToo">
                    <span className="item-sucai-title widthTooo">{lyby.htmldecode(name || '-')}</span>
                </a>

                <div className="flr">
                    <div className="likeed" onClick={this._addCount.bind(this)}>
                        <img src={countImg} className="floatL mr" style={{cursor:"pointer"}}/>
                        <div className="floatL liked">{this.state.pictureLikeedCount}</div>
                    </div>
                </div>
            </div>
        );
    }
}
Neirong.propTypes = {
    data: PropTypes.object
};


export default class WorksItem extends Component {
    componentDidMount() {
        this._loadPic();
    }

    _loadPic() {
        let dom = ReactDOM.findDOMNode(this);
        let options = {
            //placeholder : this.props.img,
            effect: "fadeIn"
        };
        if(this.props.container){
            if(typeof this.props.container == 'string' && this.props.container !== 'true'){
                options.container = $(this.props.container);
            }else{
                options.container = $(dom).parent();
            }
        }
        $(dom).find("img.lazy").removeClass('lazy').lazyload(options);
    }
    render() {
        let zwImg = "";
        let item = this.props.item;

        let detailUrl = item.href || ('/community/photo-details/' + item.id);
        let url = item.picLink || (item.url instanceof Object ? item.url.p1 : item.url);
        return (
            <div className={classNames({
                "col span_3_of_12": true,
                "isgg": !!item.m
            })}>
                <div className={classNames({"__item": true})}>
                    <a href={detailUrl} target="_blank">
                        <div className="pic">
                            <img width="100%" src="//cdn.shijue.me/images/whitebt.jpg" />
                            <img ref="myLazyImg" data-original={url} width="100%" src={zwImg}
                                 className="lazy nature"/>
                        </div>
                    </a>
                </div>
                {
                    item.m ? (
                        <div className="title _onlytitle">
                            {item.title}
                        </div>
                    ) : (
                        <Neirong {...{
                            data: item
                        }}/>
                    )
                }
            </div>
        );
    }
}

WorksItem.propTypes = {
    item: PropTypes.object,
    container : PropTypes.string
};
